<template>
    <div>
        <!-- 第一行 -->
        <el-row>
            <!-- 第一列开始 -->
            <el-col :span="6">
                <el-card shadow="never" style="text-align:center;background-color:#6fc9d4;color: ghostwhite;width: -webkit-fill-available;"  class="el-icon-office-building">
                    <h4>蜗牛医院</h4>
                </el-card>
            </el-col>
            <!-- 第一列结束 -->

            <!-- 第二列开始 -->
            <el-col :span="12" >
                <el-card shadow="never" style="width:50%;display: inline-block;background-color:#a8cea0;color: ghostwhite;text-align:center;" class="el-icon-s-custom">
                    <h4>医院人员:{{yiyuanNum}}</h4>
                </el-card>
                <el-card shadow="never" style="width:50%;display: inline-block;background-color:#a8cea0;color: ghostwhite;text-align:center;" class="el-icon-s-custom">
                    <h4>专家:{{yiyuanNum}}</h4>
                </el-card>
            </el-col>
            <!-- 第二列结束 -->

            <!-- 第三开始 -->
            <el-col :span="6">
                <el-card shadow="never" style="width: -webkit-fill-available;background-color:#b4aed0;color: ghostwhite;text-align:center;" class="el-icon-s-custom">
                    <h4>床位:{{yiyuanNum}}</h4>
                </el-card>
            </el-col>
            <!-- 第三结束 -->
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-card>
                    <div>当日病人数量</div>
                    <div id="main" style="width: 600px;height:300px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                     <div>病床统计</div>
                    <div id="bed" style="width: 600px;height:300px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                 <el-card>
                    <div>当日收入情况</div>
                    <div id="shouru" style="width: 600px;height:230px;"></div>
                </el-card>
            </el-col>
             <el-col :span="12">
                 <el-card>
                    <div>科室挂号统计</div>
                    <div id="ksghtj" style="width: 600px;height:230px;"></div>
                 </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
const echarts = require('echarts');
import axios from 'axios';
export default {
    data(){
        return{
            yiyuanNum:12222,
            charts: '',
            mNum: 200,
            zNum: 50,
            cNum: 100, 
            option : {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '收入类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 3, name: '门诊病人'},
                            {value: 2, name: '住院病人'},
                            {value: 1, name: '检查病人'},
                        ]
                    }
                ]
            },
            option1 : {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//科室
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data:['床位总数','已用床位','未使用床位']
                },
                series: [
                    {
                        name: '床位总数',
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    },
                    {   name: '已用床位',
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    },
                    {   name: '未使用床位',
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }
                ]
            },
            shouru : {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '病人类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 3, name: '门诊收入'},
                            {value: 2, name: '住院收入'},
                            {value: 1, name: '检查收入'},
                        ]
                    }
                ]
            },
            keShiGuaHaoTJ :{
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '70%',
                        data: [],
                        emphasis: {
                           itemStyle: {
                               shadowBlur: 10,
                               shadowOffsetX: 0,
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
                           }
                        }
                    }
                ]
            }
        }
    },
    methods:{
            drawPie(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.option.series[0].data[0].value = this.mNum;
                this.option.series[0].data[1].value = this.zNum;
                this.option.series[0].data[2].value = this.cNum;
                this.charts.setOption(this.option);
            },
            drawBed(id) {
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption(this.option1);
            },
            drawShouRu(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption(this.shouru);
            },
            drawksghtj(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption(this.keShiGuaHaoTJ);
            }
    },
    mounted(){
       
        // 病人统计
        axios.get("http://192.168.6.189:8080/hpl-tongji/getNum").then((r) => {
            if(r.data.code == 200){
                this.mNum = r.data.data.juZhenNum;
                this.cNum = r.data.data.chuYuanNum;
                this.zNum = r.data.data.ruYuanNum;
                this.drawPie('main');
            }
        })
        //病床统计
        axios.get("http://192.168.6.189:8080/hpl-tongji/getBedInfo").then((r) => {
            if(r.data.code == 200){
                this.option1.xAxis.data = r.data.data.depName;
                this.option1.series[0].data = r.data.data.bedTotle;
                this.option1.series[1].data = r.data.data.bedNumNo;
                this.option1.series[2].data = r.data.data.bedNum;
                this.drawBed('bed');
            }
        })
        //收入统计
        axios.get("http://192.168.6.189:8080/hpl-tongji/getShouRuInfo").then((r) => {
            if(r.data.code == 200){
                this.shouru.series[0].data[0].value = r.data.data.menZhenMoney;
                this.shouru.series[0].data[1].value = r.data.data.zhuYanMoney;
                this.shouru.series[0].data[2].value = r.data.data.jianChaMoney;
                this.drawShouRu('shouru');
            }
        })
        //科室挂号统计
        axios.get("http://192.168.6.189:8080/hpl-tongji/getDepGuaHaoTongJi").then((r) => {
            if(r.data.code == 200){
                let len = r.data.data.depName.length;
                
                for(let i=0;i<len;i++){
                    const obj = {value: r.data.data.guaHaoNum[i],name: r.data.data.depName[i]};

                    this.keShiGuaHaoTJ.series[0].data.push(obj);
                }
                
                this.drawksghtj('ksghtj');
            }
        })
    }
}
</script>
<style scope>
    .el-card__body {
        padding: 5px !important;
    }
</style>